import React, { useState } from 'react'

export default function ComplexHookState() {

  const [friends, setFriends] = useState(['王总', '郑总', '姜总'])
  const [students, setStudent] = useState([
    {id: 1, name: '王总', age: 18},
    {id: 2, name: '郑总', age: 18},
    {id: 3, name: '姜总', age: 18},
    {id: 4, name: '陈总', age: 18},
    {id: 5, name: '柳总', age: 18},
  ])

  function incrementAgeWithIndex(index) {
    const newStudents = [...students]
    newStudents[index].age += 1
    setStudent(newStudents)
  }
  
  return (
    <div>
      <h2>Friends List:</h2>
      <ul>
        {
          friends.map(item => <li key={item}>{item}</li>)
        }
      </ul>
      <button onClick={e => setFriends([...friends, '柳总'])}>Add Friend</button>

      <h2>Student List</h2>
      <ul>
        {
          students.map((item, index) => {
            return (
              <li key={item.id}>
                <span>Name: {item.name} Age: {item.age}</span>
                <button onClick={e => incrementAgeWithIndex(index)}>Age+1</button>
              </li>
            )
          })
        }
      </ul>
    </div>
  )
}
